<!DOCTYPE html>
<html>
<head>
    <title>Swipe Events</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" id="swipe-preview" data-init="bindSwipeEvents" data-title="Edit Contact Details">
    <div class="contact-photo"></div>
    <p style="text-align: center;">Swipe item to Delete.</p>
    
    <ul data-role="listview" data-style="inset" data-type="group" id="swipeListView">
        <li>
            <ul>
                <li>Username <span class="value">christina</span></li>
                <li>Email <span class="value">clientservice at kendoui.com</span></li>
            </ul>
        </li>
        <li>
            Languages
            <ul>
                <li>English <span class="value">Native</span></li>
                <li>French<span class="value">Advanced</span></li>
            </ul>
        </li>
        <li>
            PC Skills
            <ul>
                <li>MS Word</li>
                <li>MS Excel</li>
                <li>MS Outlook</li>
                <li>MS PowerPoint</li>
                <li>Windows (XP, Vista)</li>
                <li>Internet</li>
            </ul>
        </li>
    </ul>

</div>

<script>
    function bindSwipeEvents(e) {
        e.view.element.find("#swipeListView li li").kendoMobileSwipe(function(e) {
            e.target.html("You swiped "  + e.direction);
        }, { surface: e.view.element.find("#swipeListView") });
    }
</script>

<style scoped>
    #swipeListView li {
        /* line-height: 90px; */
    }
    
    .contact-photo {
    	display: block;
    	margin: 20px auto;
    	width: 160px;
    	height: 160px;
    	border-radius: 90px;
    	-moz-border-radius: 90px;
    	-webkit-border-radius: 90px;
    	background: url(../../content/shared/images/people/1.jpg) repeat 0 0;
    	box-shadow:inset 0 0 10px #5f3a1e;
    }
    
    #swipe-preview .value {
	    float: right;
	    color: #ccc;
    }
    
    .km-ios #swipe-preview .km-navbar {
	    background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(0.06, rgba(255, 255, 255, 0.45)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(1, rgba(100, 100, 100, 0))), url(../../content/shared/images/patterns/pattern3.png);
    }
    
    .km-ios #swipe-preview .km-content{
	    background: url(../../content/shared/images/patterns/pattern2.png) repeat 0 0;
    }
    
    .km-tablet .km-ios #swipe-preview .km-view-title {
        color: #fff;
        text-shadow: 0 -1px rgba(0,0,0,.5);
    }
</style>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
